<!-- 
  模块没有使用命名空间的时候:
    1. state 数据是分模块的.
    2. getter 数据是没有分模块的,都在根上. (不同模块之间的 getter 不能重名)
    3. mutation 方法是没有分模块的,都在根上. 
      如果重名的话,不会报错,但是提交该 mutation 时,都会被触发
    4. action 方法是没有分模块的,都在根上
      如果重名的话,不会报错,但是提交该 action 时,都会被触发

  综上,一般在做Vuex的模块拆分时,一定会做命名空间处理, 设置一个 namespaced: true

    1. state 数据还是分模块的
    2. getter 数据都在根上,但是他们的名字会在前面追加模块名
        doubleCount  =>  counter/doubleCount
        countTotal   =>  cart/countTotal
    3. mutation 与 action 都会增加上 模块名前缀
        this.commit('increment')    => this.commit('counter/increment')
        this.dispatch('incrementAsync') => this.dispatch('counter/incrementAsync')

  加了命名空间之后,辅助函数也需要调整

 -->
<template>
  <div>
    <h1>App</h1>
    <p>Counter.count: {{ $store.state.counter.count }}</p>
    <p>Cart.raw: {{ $store.state.cart.raw }}</p>

    <!-- <p>Counter.doubleCount: {{ $store.getters.doubleCount }}</p>
    <p>Cart.countTotal: {{ $store.getters.countTotal }}</p> -->

    <p>Counter.doubleCount: {{ $store.getters["counter/doubleCount"] }}</p>
    <p>Cart.countTotal: {{ $store.getters["cart/countTotal"] }}</p>
    1
    <button @click="$store.commit('counter/increment')">自增</button>
    <button @click="$store.dispatch('counter/incrementAsync')">
      自增Async
    </button>
    <hr />
  </div>
</template>

<script>
import { mapState, mapGetters, mapMutations, mapActions } from "vuex";

export default {
  created() {
    console.log(this.$store);
  },

  computed: {
    // this.count => this.$store.state.count
    // ...mapState(["count"]),

    // this.count => this.$store.state.counter.count
    ...mapState("counter", ["count"]),

    // this.raw  => this.$store.state.cart.raw
    ...mapState("cart", ["raw"]),

    // this.doubleCount => this.$store.getters['counter/doubleCount']
    ...mapGetters("counter", ["doubleCount"]),
  },

  methods: {
    // this.increment(payload) => this.$store.commit('counter/increment', payload)
    ...mapMutations("counter", ["increment"]),

    // this.incrementAsync(payload) => this.$store.dispatch('counter/incrementAsync')
    ...mapActions("counter", ["incrementAsync"]),
  },
};
</script>
